<template>
	<view class="content-tabar-f nbj">
		<view class="bj">
			<view class="header-top"></view>
			<view class="header">首页</view>
			<uni-search-bar class="header-seach" :radius="34" @tap="seachGoods" placeholder="搜索您要的商品" clearButton="none" cancelButton="none" @confirm="search" :focus="false" v-model="searchValue"
							@cancel="cancel" >
						</uni-search-bar>
		</view>
		
		
		<scroll-view :scroll-y="true" class="scroll" @scrolltolower="getGoodsList" lower-threshold="200">
			<view class="nbj" v-if="banner!=null">
				<view class="banner">
					<swiper :autoplay="true" :interval="5000" :indicator-dots="true" :circular="true">
						<swiper-item class="item" v-for="bann in banner">
							<image :src="$utils.cdnImg(bann.image)" mode="widthFix"></image>
						</swiper-item>
					</swiper>
					
				</view>
			</view>
		
			<view class="goods">
				<view>
					<view class="flex-row flex-wrap flex-content-between">
						<view v-for="item in list" class="scroll-item flex-column" @tap="goodsInfoPath(item.id)">
							<image :src="$utils.cdnImg(item.image)" mode="widthFix"></image>
							<view class="scroll-item-name">{{item.title}}</view>
							<view class="tags">
								<view v-if="item.tags.length>0" class="flex-row">
									<view v-for="tag in item.tags" class="tag-txt">{{tag.title}}</view>
									
								</view>
							</view>
							<view class="flex-row flex-content-between flex-item-center">
								<view class="flex-row scroll-item-price">
									<view>￥</view>
									<view>{{item.price}}</view>
									<view>￥{{item.original_price}}</view>
								</view>
								<image @tap.stop="getAttr(item.goodsitem,item)" class="scroll-item-img" src="../../static/index/gwc.png" mode="scaleToFill"></image>
							</view>
							<view class="jifen" v-if="item.score>0">送{{item.score}}积分</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<attr ref="gouwuces" :attrList="attrList" @confirm="confirm"></attr>
	</view>
</template>

<script>
	import attr from "@/components/attr.vue"
	export default {
		components:{
			attr
		},
		data() {
			return {
				attrList:[
				],
				goodsInfo:null,
				searchValue:"",//搜索内容
				banner:null,
				page:1,
				list:[//商品列表
				
				]
			}
		},
		onLoad() {
			this.getBanner();
			this.getGoodsList(true);
		},
		onPullDownRefresh() {
			this.page = 1;
			this.list = [];
			this.getGoodsList(false,()=>{
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			//添加到购物车
			confirm(e){
				let that = this;
				let data = {
					cart:[
						{
							mumerchant_goods_id:this.goodsInfo.id,
							mumerchant_goods_item_id:e.data.id,
							num:e.num
						}
					],
					type:'add'
				}
				this.$api.changeShopCart(data).then(res=>{
					that.$store.dispatch("getCartList")
					that.$utils.showMessage("添加到购物车成功")
				})
			},
			//获取banner
			getBanner(){
				let that = this
				this.$api.getBannerList({type:"index"}).then(res=>{
					console.log(res);
					that.banner = res;
				})
			},
			getGoodsList(loading,callback){
				if(loading==undefined){
					loading = false
				}
				// console.log("触底");
				let that = this;
				let page = this.page;
				if(page==0){
					return
				}
				let data = {
					page:page,
					is_sell:1,
					goods_type:1,
					limit:30,
				}
				this.$api.getGoodsList(data,loading).then(res=>{
					// console.log(res.data);
					if(res.data&&res.data.length>0){
						that.list.push(...res.data)
						that.page+=1
					}else{
						that.page = 0
					}
				}).finally(e=>{
					if(typeof callback=='function'){
						callback();
					}
				})
			},
			search(){
				console.log(this.searchValue);
			},
			//跳转到搜索页面
			seachGoods(){
				uni.navigateTo({
					url:'/pages/goods/goods_list'
				})
			},
			//跳转到商品详情页面
			goodsInfoPath(id){
				uni.navigateTo({
					url:'/pages/goods/goods_info?id='+id
				})
			},
			getAttr(goodsitem,goodsInfo){
				this.attrList = goodsitem;
				this.goodsInfo = goodsInfo;
				this.$refs.gouwuces.open();
			}
		}
	}
</script>

<style lang="scss">
	.item{
		width: 690rpx;
		>image{
			width: 100%;
		}
	}
	.nbj{
		
		// height: ;
		/* #ifdef MP */
		// background-image: url('http://ws.facai.maowenke.cn/img/indexbg.png');
		/* #endif */
		/* #ifndef MP */
		background-image: url('../../static/index/dowbj.png');
		/* #endif */
		// height: 484rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		// position: relative;
		// height: 50vh;
		// background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
	}
	.jifen{
		font-size: 14rpx;
		color: #00aa7f;
		margin-left: 5rpx;
	}
	.tag-txt{
		height: 38rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1px solid #FF5000;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF5000;
		margin-right: 5rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
	}
	.tags{
		height: 38rpx;
		margin-top: 5rpx;
	}
	.scroll-item-img{
		width: 44rpx;
		height: 44rpx;
		margin-top: 10rpx;
	}
	.scroll-item{
		margin-bottom: 50rpx;
		>image:nth-child(1){
			width: 333rpx;
		}
	}
	.scroll-item-price{
		margin-top: 10rpx;
		>view:nth-child(1){
			font-size: 22rpx;
			font-family: DIN-Regular, DIN;
			font-weight: 400;
			color: #FF5000;
			line-height: 54rpx;
		}
		>view:nth-child(2){
			font-size: 34rpx;
			font-family: DIN-Bold, DIN;
			font-weight: bold;
			color: #FF5000;
		}
		>view:nth-child(3){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			text-decoration: line-through;
			margin-left: 16rpx;
		}
	}
	.scroll-item-name{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 20rpx;
	}
	/* #ifdef H5 */
	.scroll{
		width: 750rpx;
		height: calc(100vh - 290rpx);
		background-color: #FFFFFF;
		// margin-top: -200rpx;
		// margin-left: 30rpx;
		
		// background-repeat:no-repeat;
		// padding-top: 200rpx;
	}
	/* #endif */
	/* #ifdef APP-PLUS */
	.scroll{
		width: 690rpx;
		height: calc(100vh - 570rpx);
		background-color: #FFFFFF;
	}
	/* #endif */
	/* #ifdef MP */
	.scroll{
		width: 750rpx;
		height: calc(100vh - 600rpx);
		background-color: #FFFFFF;
	}
	/* #endif */
	.goods{
		width: 690rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
	}
	.banner{
		width: 690rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		// margin-top: 244rpx;
		>image:nth-child(1){
			width: 690rpx;
		}
	}
	.header-seach{
		width: 690rpx;
		height: 68rpx;
		margin-left: 10rpx;
	}
	.header{
		font-size: 34rpx;
		height: 50rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: $default-button-foncolor;
		text-align: center;
		// background-color: rebeccapurple;
	}
	.header-top{
		width: 750rpx;
		height: 21rpx;
	}
	.bj{
		width: 750rpx;
		height: 191rpx;
		/* #ifdef MP */
		background-image: url('http://ws.facai.maowenke.cn/img/indexbg.png');
		/* #endif */
		/* #ifndef MP */
		background-image: url('../../static/index/upbj.png');
		/* #endif */
		
		background-size: 100%;
		// z-index: 9999;
		// position: absolute;
		// top: 0rpx;
	}
</style>
